<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>查询课程信息</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <!--    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>-->
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.js"></script>
</head>
<link rel="stylesheet" href="../09-购物车/css/common.css">
<style>
    #app {
        margin: 10px;
    }

    .search {
        width: 90%;
        border: 1px solid #E4E7ED;
        padding: 10px;
        margin: 10px 0;
    }

    table {
        border-collapse: collapse;
        /*  border-collapse:属性是用来决定边框是分开的还是合并的，
            collapse：合并模式相邻单元格共享边框
            seperate: 分割模型相邻单元格独立边框
        */
    }

    th, td {
        border: 1px solid #eeeeee;
        padding: 4px 10px;
    }

    tbody, thead {
        text-align: center;
    }
</style>
<body>
<div id="app">
    <div class="search">
        <span>课程名称：</span>
        <input type="text" v-model="title">
        <button @click="search">查询</button>
    </div>
    <table>
        <thead>
        <tr>
            <th>课程编号</th>
            <th>课程名称</th>
            <th>课时</th>
            <th>年级</th>
            <th>操作</th>
        </tr>
        </thead>
        <tbody v-for="(value,i) in courselist ">
        <tr>
            <td>{{value.id}}</td>
            <td>{{value.title}}</td>
            <td>{{value.pageviews}}</td>
            <td>{{value.saleoffenddate}}</td>
            <td>
                <button>修改</button>
                <button>删除</button>
            </td>
        </tr>
        </tbody>
        <!--分页-->
        <!--        <tfoot style="text-align: center">-->
        <tfoot :style="'text-align: center'">
        <tr>
            <td colspan="5">
                <button>首页</button>
                <button>上页</button>
                <span>1/4</span>
                <button>首页</button>
                <button>尾页</button>
            </td>
        </tr>
        </tfoot>
    </table>
</div>
<script>
    new Vue({
        el: "#app",
        // 数据的获取 是在 生命周期的created阶段 因此数据获取应该放在这个钩子函数
        created() {
            this.getData()
        },
        data() {
            return {
                id: '',
                // 课程名称
                title: '',
                // 页码
                // 课程数据
                courselist: [],
            }
        },
        methods: {
            search() {
                // 搜索方法
                var item = this.courselist.filter(ele => {
                    if (ele.title===this.title) {
                        return ele
                    }
                })
                return this.courselist=item
            },
            getData() {
                // 异步获取数据传参
                axios.post('./data/data.json').then((res) => {
                    this.courselist = res.data.result;
                })
            }
    },
    })
</script>
</body>
</html>
